<template>
  <div style="margin: 20px;">
    <el-form label-position="left" inline class="demo-table-expand" v-model="listData" style="margin-left: 100px;">
      <el-form-item label="作业名称">
        <span>{{ listData.script_name }}</span>
      </el-form-item>
      <el-form-item label="耗时">
        <span v-if="listData.duration === -1">&emsp;&emsp;0 s</span>
        <span v-else>&emsp;&emsp;{{ listData.duration }} s</span>
      </el-form-item>
      <el-form-item label="执行账户">
        <span>{{ listData.release_user }}</span>
      </el-form-item>
      <el-form-item label="状态">
        <span v-if="listData.is_final === 0" style="color: green;">&emsp;&emsp;Running</span>
        <span v-else style="color: red;">&emsp;&emsp;Stop</span>
      </el-form-item>
      <el-form-item label="超时时间">
        <span>{{ listData.timeout }} s</span>
      </el-form-item>
      <el-form-item label="创建时间">
        <span>{{ listData.create_time }}</span>
      </el-form-item>
      <el-form-item label="脚本参数">
        <span>{{ listData.script_parms }}</span>
      </el-form-item>
      <el-form-item label="操作者">
        <span>&emsp;{{ listData.operator }}</span>
      </el-form-item>
    </el-form>
    <div style="margin: 5px 5px 0px;
          padding: 3px;
          border: 1px dashed rgb(0, 160, 198);
          background-color: rgb(0,0,0);">
    <code style="background-color: rgb(0, 0, 0);color:#00ff00">
        <br>
        <span v-for="n in showText" :style="{'color': n.color}"> <pre style=" white-space: pre-wrap;" v-html="n.text"></pre> <br></span>
        <br>
    </code>
    </div>
  </div>
</template>

<script>

import { TaskDetail } from '../../api/configure'

export default {
  name: 'task-run',
  data() {
    return {
      listData: null,
      listId: '',
      showText: [],
      timeout1: 0
    }
  },
  created() {
    this.listId = this.$route.query.id
    this.getList()
  },
  methods: {
    getList() {
      var _this = this
      TaskDetail(this.listId).then(response => {
        this.listData = response.data
        this.showText = []
        var color = '#00ff00'
        if (this.listData.status === '0') {
          color = 'red'
        }
        try {
          var text = JSON.parse(this.listData.memo)
        } catch (e) {
          console.log(e)
        }
        if (typeof text === 'string') {
          this.showText.push({ text: this.listData.memo, 'color': color })
        } else if (Object.prototype.toString.call(text) === '[object Array]') {
          for (var j = 0; j < text.length; j++) {
            try {
              this.showText.push({ text: 'IP:' + text[j].Host + '  执行命令:' + text[j].Command, 'color': color })
              if (text[j].Error) {
                this.showText.push({ text: '错误结果:\n' + text[j].Result, 'color': color })
                if (JSON.stringify(text[j].Error) !== '{}') {
                  this.showText.push({ text: '错误:' + text[j].Error, 'color': color })
                }
                this.showText.push({ text: '===============', 'color': color })
                if (this.listData.duration === this.listData.timeout) {
                  this.showText.push({ text: '执行超时', 'color': color })
                } else {
                  this.showText.push({ text: '执行出错', 'color': color })
                }
              } else {
                this.showText.push({ text: '执行结果:\n' + text[j].Result, 'color': color })
                this.showText.push({ text: '===============', 'color': color })
                this.showText.push({ text: '执行完成', 'color': color })
              }
            } catch (e) {
              console.log(e)
            }
          }
        } else {
          if (text !== '' && text !== undefined) {
            this.showText.push({ text: '执行结果:\n' + text.Result, 'color': color })
            if (text.Error && JSON.stringify(text[j].Error) !== '{}') {
              this.showText.push({ text: '错误:' + text.Error, 'color': color })
            }
            this.showText.push({ text: '===============', 'color': color })
            if (this.listData.duration === this.listData.timeout) {
              this.showText.push({ text: '执行超时', 'color': color })
            } else {
              this.showText.push({ text: '执行出错', 'color': color })
            }
          } else {
            this.showText.push({ text: 'There is nothing to show!', 'color': '#ffff00' })
          }
        }
        console.log(this.listData.is_final)
        if (this.listData.is_final === 0) {
          this.timeout1 = setTimeout(function() { _this.getList() }, 4000)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
  .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
}
</style>
